<template>
  <div>
    <h3>
      <router-link to="/business/course">{{ course.name }}</router-link>
      /
      <router-link to="/business/chapter">{{ chapter.name }}</router-link>
    </h3>
    <p>
      <button @click="add()" class="btn btn-white btn-default btn-round">
        <i class="ace-icon fa glyphicon-plus"></i>
        新增
      </button>
      &nbsp;
      <button @click="list()" class="btn btn-white btn-default btn-round">
        <i class="ace-icon fa fa-refresh"></i>
        刷新
      </button>
    </p>
    <Pagination ref="pagination" :list="list"></Pagination>
    <table id="simple-table" class="table  table-bordered table-hover">
      <thead>
      <tr>
        <th>标题</th>
        <th>课程</th>
        <th>大章</th>
        <th>视屏</th>
        <th>时长</th>
        <th>收费</th>
        <th>顺序</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="section in sections">
        <td>{{ section.title }}</td>
        <td>{{ section.courseId }}</td>
        <td>{{ section.chapterId }}</td>
        <td>{{ section.video }}</td>
        <td>{{ $filter.formatSecond(section.time) }}</td>
        <td>{{ $filter.optionKVArray($Enums.COURSE_CHARGE_ARRAY, section.charge) }}</td>
        <td>{{ section.sort }}</td>
        <td>
          <div class="btn-group">
            <button class="btn btn-xs btn-info" @click="edit(section)">
              <i class="ace-icon fa fa-pencil bigger-120"></i>
            </button>
            <button class="btn btn-xs btn-danger">
              <i class="ace-icon fa fa-trash-o bigger-120" @click="del(section.id)"></i>
            </button>
          </div>
        </td>
      </tr>
      </tbody>
    </table>
    <!-- 弹窗 -->
    <div id="form-modal" class="modal fade" tabindex="-1" role="dialog">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">表单</h4>
          </div>
          <div class="modal-body">
            <form class="form-horizontal">
              <div class="form-group">
                <label class="col-sm-2 control-label">标题</label>
                <div class="col-sm-10">
                  <input v-model="section.title" type="text" class="form-control">
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-2 control-label">课程</label>
                <div class="col-sm-10">
                  <input v-model="section.courseId" type="text" class="form-control">
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-2 control-label">大章</label>
                <div class="col-sm-10">
                  <input v-model="section.chapterId" type="text" class="form-control">
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-2 control-label">视屏</label>
                <div class="col-sm-10">
                  <File v-bind:suffixs="['mp4']"
                        v-bind:inputId="'video-upload'"
                        v-bind:text="'上传视屏'"
                        v-bind:after-upload="afterUpload"
                        v-bind:use="'T'"></File>
                  <div v-show="section.video" class="row">
                    <div class="col-md-9">
                      <video v-bind:src="section.video" id="video" controls="controls" onload="getTime"></video>
                    </div>
                  </div>
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-2 control-label">时长</label>
                <div class="col-sm-10">
                  <input v-model="section.time" class="form-control">
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-2 control-label">收费</label>
                <div class="col-sm-10">
                  <!--                  <input v-model="section.charge" type="text" class="form-control">-->
                  <select v-model="section.charge" class="form-control">
                    <option v-for="o in $Enums.SECTION_CHARGE_ARRAY" v-bind:value="o.key">{{ o.value }}</option>
                  </select>
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-2 control-label">顺序</label>
                <div class="col-sm-10">
                  <input v-model="section.sort" type="text" class="form-control">
                </div>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            <button type="button" class="btn btn-primary" @click="save">保存</button>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
  </div>
</template>
<script>
import Pagination from "@/components/pagination";
import File from "@/components/file";

export default {
  components: {Pagination, File},
  name: "section",
  data() {
    return {
      section: {},
      sections: [],
      course: {},
      chapter: {}
    }
  },
  props: {
    'activeSidebar': {
      type: Function
    }
  },
  mounted() {
    let _this = this;
    this.activeSidebar("business-course-sidebar")

    let chapter = SessionStorage.get(SESSION_KEY_CHAPTER) || {};
    let course = SessionStorage.get(SESSION_KEY_COURSE) || {};
    if (Tool.isEmpty(course) || Tool.isEmpty(chapter)) {
      _this.$router.push("/welcome")
    }
    _this.chapter = chapter;
    _this.course = course;
    _this.list(1);
  },
  methods: {
    list(page) {
      Loading.show();
      let _this = this;
      _this.$post(process.env.VUE_APP_SERVER + "/business/admin/section/list", {
        page: page,
        size: _this.$refs.pagination.size,
        courseId: _this.course.id,
        chapterId: _this.chapter.id
      }).then(res => {
        Loading.hide();
        console.log(res);
        let content = res.content;
        _this.sections = content.list;
        _this.$refs.pagination.render(page, content.total);
      }).catch(res => {
        console.log(res);
      });
    },
    add() {
      let _this = this;
      $("#form-modal").modal('show');
    },
    save() {
      let _this = this;
      // 保存校验
      if (1 != 1
          || !Validator.require(_this.section.title, "标题")
          || !Validator.length(_this.section.title, "标题", 1, 50)
          || !Validator.length(_this.section.video, "视屏", 1, 200)
      ) {
        return;
      }

      Loading.show();
      _this.$post(process.env.VUE_APP_SERVER + "/business/admin/section/save", _this.section).then(res => {
        Loading.hide();
        console.log(res);
        if (res.success) {
          $("#form-modal").modal('hide');
          _this.list(1);
          Toast.success('保存成功！');
        } else {
          $("#form-modal").modal('hide');
          _this.list(1);
          Toast.success(res.message);
        }
      }).catch(res => {
        console.log(res);
      });
    },
    del(id) {
      let _this = this;
      Confirm.show("删除小节后不可恢复!", function () {
        Loading.show();
        _this.$get(process.env.VUE_APP_SERVER + "/business/admin/section/del/" + id).then(res => {
          Loading.hide();
          console.log(res);
          if (res.success) {
            Toast.success('删除成功！');
            _this.list(1);
          } else {
            Toast.success('删除失败！');
            _this.list(1);
          }
        }).catch(res => {
          console.log(res);
          Toast.error('删除失败！')
        });
      })
    },
    edit(section) {
      let _this = this;
      _this.section = $.extend({}, section);
      $("#form-modal").modal('show');
    },
    afterUpload(res) {
      let _this = this;
      _this.section.video = res.content.path;
    },
    // 获取时长
    getTime() {
      debugger
      let _this = this;
      console.log(_this.section.video);
      let ele = document.getElementById("video");
      console.log(ele);
      _this.section.time = parseInt(ele.duration, 10);
    }
  }
}
</script>

<style scoped>
video {
  width: 100%;
  height: auto;
  margin-top: 10px;
}
</style>